<template>
  <div>
    <!-- 标题栏 -->
    <van-sticky>
      <van-nav-bar
          title="填写订单"
          left-arrow
          @click-left="$router.go(-1)">

        <template #right>

          <van-icon name="weapp-nav" size="18" @click="showShare = true" />
          <van-share-sheet
              get-container="body"
              v-model="showShare"
              :options="options"
          />
        </template>

      </van-nav-bar>
    </van-sticky>
    <!-- 联系人和地址 -->
    <div class="divider" style="height: 65px;background-color: white">
      <van-row>
        <van-col span="2">
          <div style="padding: 10px 0 0 5px;text-align: left">
            <van-icon size="20" name="location" color="red" />
          </div>
        </van-col>
        <van-col span="18">
          <div style="text-align: left">
            <div style="padding: 10px 0 0 5px;">
              <span class="custom-label">姓名</span>
              <van-tag type="danger">16854885254</van-tag>
            </div>
            <div style="padding-left: 5px;">
              <van-row>
                <van-col span="4">
                  <span class="address-details">广东省</span>
                </van-col>
                <van-col span="4">
                  <span class="address-details">中山市</span>
                </van-col>
                <van-col span="8">
                  <span class="address-details">地址3</span>
                </van-col>
                <van-col span="8">
                  <span class="address-details">地址4</span>
                </van-col>
              </van-row>
            </div>
          </div>
        </van-col>
        <van-col span="4">
          <div style="margin: 0 0 auto;line-height: 60px">
            <van-button style="width: 50px;" size="small"
                        round color="linear-gradient(to right, #ff6034, #ee0a24)"
                        @click="$router.push('/views/order/Addresslist')">修  改</van-button>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 自定义分割线 -->
    <div class="divider"></div>
    <!--  订单提醒  -->
    <div style="height: 40px;text-align: center">
      <van-row>
        <van-col span="6">
          <div>
            <p style="font-size: 12px; margin-left: 30px">配送时间</p>
          </div>
        </van-col>
        <van-col span="18">
          <div style="text-align: right">
            <van-notice-bar
                style="font-size: 12px;background-color: white;margin-left: 30px"
                left-icon="volume-o"
                text="受疫情影响,各地物流时效可能延迟,为您带来不便,谢谢您的谅解!"
            />
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 自定义分割线 -->
    <div class="divider"></div>
    <!-- 商品信息 -->
    <van-panel style="text-align: left" title="类别">
      <van-card
          style="text-align: left"
          price="15.00"
          desc="质量一级棒,拍人神器"
          title="黑米平板电脑"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag type="danger">自营</van-tag> &nbsp;
          <van-tag plain type="danger">酷鲨物流</van-tag>
          <van-tag plain type="danger">酷鲨物流</van-tag>
          <van-tag plain type="danger">酷鲨物流</van-tag>
        </template>
        <template #footer>
          <van-stepper v-model="num" theme="round"  integer/>
        </template>
      </van-card>

      <!-- 商品总金额等 -->
      <div class="orderinfo-panel">
        <van-row class="row">
          <van-col :span="8" class="orderinfo-label">商品原价金额</van-col>
          <van-col :span="16" class="orderinfo-value">
            ￥ aasdas
          </van-col>
        </van-row>
        <van-row class="row">
          <van-col :span="8" class="orderinfo-label">运费</van-col>
          <van-col :span="16" class="orderinfo-value">
            <van-tag type="danger">免运费</van-tag>
            ￥ 0.00
          </van-col>
        </van-row>
        <!--  优惠券    -->
        <van-row class="row">
          <div>
            <!-- 优惠券单元格 -->
            <van-coupon-cell
                style="padding: 0"
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                @click="showList = true"
            />
            <!-- 优惠券列表 -->
            <van-popup
                v-model="showList"
                round
                position="bottom"
                style="height: 90%; padding-top: 4px;"
            >
              <van-coupon-list
                  :coupons="coupons"
                  :chosen-coupon="chosenCoupon"
                  :disabled-coupons="disabledCoupons"
                  @change="onChange"
                  @exchange="onExchange"
              />
            </van-popup>
          </div>
        </van-row>
        <van-row class="row">
          <van-col :span="8" class="orderinfo-label">需付款</van-col>
          <van-col :span="16" class="orderinfo-value">-￥ 0.00</van-col>
        </van-row>
        <van-row class="row">
          <van-cell-group>
            <van-col :span="8" class="orderinfo-label">留言</van-col>
            <van-field style="padding: 0;width: 200px;text-overflow: ellipsis"
                       v-model="value" placeholder="建议留言前先于客服沟通确认" />
          </van-cell-group>
        </van-row>
        <van-row class="row">
          <van-col :span="8" class="orderinfo-label">创建时间</van-col>
          <van-col :span="16" class="orderinfo-value">2022-12-12</van-col>
        </van-row>
        <van-row class="row">
          <van-col :span="8" class="orderinfo-label">支付方式</van-col>
          <van-col :span="16" class="orderinfo-value">在线支付</van-col>
        </van-row>
      </div>
    </van-panel>

    <!--    自定义分割线   -->
    <div class="divider"></div>

    <div class="orderinfo-panel">
      <van-row class="row">
        <van-col :span="8" class="orderinfo-label">订单总金额</van-col>
        <van-col :span="16" class="orderinfo-value">￥ 0.00</van-col>
      </van-row>
    </div>
    <!--  选择支付方式  -->
    <van-dropdown-menu>
      <van-dropdown-item title="请选择支付方式" get-container="body" ref="item">
        <div class="orderinfo-panel">
          <van-radio-group  v-model="radio">
            <van-cell-group>
              <van-cell class="single-checkbox" title="微 信" clickable @click="radio = '1'">
                <template #icon>
                  <img class="imgIcon" :src="activeIcon" />
                </template>
                <template #right-icon>
                  <van-radio checked-color="red" name="1" />
                </template>
              </van-cell>
              <van-cell class="single-checkbox" title="支付宝" clickable @click="radio = '2'">
                <template #icon>
                  <img class="imgIcon" :src="activeIcon" />
                </template>
                <template #right-icon>
                  <van-radio checked-color="red" name="2" />
                </template>
              </van-cell>
              <van-cell class="single-checkbox" title="银行卡" clickable @click="radio = '3'">
                <template #icon>
                  <img class="imgIcon" :src="activeIcon" />
                </template>
                <template #right-icon>
                  <van-radio checked-color="red" name="3" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <div style="padding: 5px 16px;">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!--    自定义分割线&ndash  -->
    <div class="divider"></div>
    <!--        提交订单-->
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit"/>
  </div>
</template>

<script>

import { Toast } from 'vant';

const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
};

export default {
  data() {
    return {


      radio:'1',
      activeIcon: 'https://img01.yzcdn.cn/vant/user-active.png',

      value: '',

      showShare: false,
      options: [
        [
          { name: '消息', icon: 'wechat' },
          { name: '回到首页', icon: 'wechat-moments' },
          { name: '我的商城', icon: 'weibo' },
          { name: '购物车', icon: 'qq' },
        ],
        [
          { name: '商品评论', icon: 'link' },
          { name: '官方客服', icon: 'poster' },
          { name: '意见反馈', icon: 'qrcode' },
          { name: '举报', icon: 'weapp-qrcode' },
        ],
      ],

      num: 1,

      showList:false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
    };
  },
  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    onSubmit(){
      Toast(this.value)
      Toast(this.radio)
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
  },
};
</script>

<style scoped>
/** 自定义分割线 */
.divider {
  height: 7px;
  background: #eee;
}
.custom-label {
  margin-right: 4px;
  font-size: 15px;
  vertical-align: middle;
  color: black;

}
/** 地址详情信息样式*/
.address-details{
  font-size: 10px;
}

/** 订单基本信息样式 */
.orderinfo-panel {
  padding: 5px 15px;
}

.orderinfo-panel .row {
  padding: 5px;
}

.orderinfo-label {
  text-align: left;
}

.orderinfo-value {
  text-align: right;
  color: #666;
  font-size: 0.9em;
}
.single-checkbox{
  padding: 10px 0 ;
  text-align: left;
}
.imgIcon{
  height: 20px;
  margin-right: 10px;
}
</style>
